<template>
  <div>
    <div class="chat-box-msg"
         v-for="(item,index) in msgData"
         :key="index"
         :class="{'right':item.replyFlag}"
         v-bind:style="childrenchange(item.rightaway)">
      <div class="chat-box-info">
        <span class="chat-name pull-right">{{item.orgName}}</span>
        <span class="chat-time ">{{item.msgTime}}</span>
      </div>
      <div class="chat-avatar" v-if="item.nickName">{{item.nickName}}</div>
      <div class="chat-text">
        {{item.msgContent}}
        <a v-if="item.fileName">{{item.fileName}}</a>

        <el-tooltip style="margin-left: 2rem;" class="item" effect="dark" content="下载资料" placement="top-start" v-if="item.fileId" >
          <el-button class="downbtn" @click="downloadfile(item.fileId,item.filenametemp)">
            <img src="img/download-blue.png" class="detail-data-img"/><span>附件下载:</span>
          </el-button>
        </el-tooltip>
        <p id="pfilename" style="margin: 0 0 0 5px;font-size: 14px;" class="detail-data-file" v-if="item.fileId">{{item.filenametemp}}</p>

        <!--<el-button-->
          <!--type="primary"-->
          <!--style=""-->
          <!--icon="el-icon-message"-->
          <!--class="btnreply"-->
          <!--@click="addSubject(item.msgContent,item.achievementId)"-->
          <!--size="mini">拟定课题</el-button>-->

      </div>


    </div>
    <el-dialog title="回复意见" :visible.sync="dialogVisible">
      <el-input
        type="textarea"
        v-model="opinion"
        rows="3"
      >
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="sendMessage()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {topicMessage} from '@/api/planning/message';
  import {getfileinfo,filedownload} from "@/api/system";
  export default {
    name: "msglevyReply",
    data() {
      return {
        opinion:'',
        dialogVisible:false,
        senderIdtemp:'',
        topicIdtemp:'',
        messageIdtemp:'',
      }
    },
    props: {
      msgData: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      replymsg(senderId,topicId,messageId){
        this.dialogVisible=true;
        this.senderIdtemp=senderId;
        this.topicIdtemp=topicId;
        this.messageIdtemp=messageId;

      },
      sendMessage(){
        if(!this.opinion){
          this.$message({
            message: '请先填写回复意见',
            type: 'warning'
          });
          return;
        }
        var messageForm = {
          content:this.opinion,
          senderId:this.senderIdtemp,
          topicId:this.topicIdtemp,
          parentId:this.messageIdtemp,
        }
        topicMessage(messageForm).then(response => {
          if (response.data.code == 0) {
            this.$notify({
              title: "成功",
              message: "发送成功",
              type: "success",
              duration: 2000
            });
            this.opinion = ''
            this.dialogVisible = false;
            this.$emit("refreshMessage")
          }
        });
      },
      cancel() {
        this.dialogVisible = false;
      },
      childrenchange(rightaway){
        if(rightaway==1){
          return "margin-left: 44px;"
        }
      },
      downloadfile(fileId,filename) {
        filedownload(fileId).then(response => {
          if(response.status==200){
            this.download(response.data,filename)
          }
        }).catch((error) => {

        })
      },
      // 下载文件
      download (data,filename) {
        if (data==null) {
          return
        }else{
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download',filename )
          document.body.appendChild(link)
          link.click()
        }
      },
      // 增加课题跳转
      addSubject(msgContent,achievementId){
        let src = `/addSubject/detail/${this.$route.params.id}`;
        this.$router.push({
          path: src,
          query:{
            msgContent:msgContent,
            achievementId:achievementId,
          }
        })
      },



    }
  };
</script>

<style lang="scss">
  .chat-box-msg{
    margin-top: 10px;
    padding: 0 35px;
  }

  .chat-box-info{
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
  }

  .chat-name{
    font-weight: 600;
  }


  .chat-time{
    color: #999;
  }

  .pull-left{
    float: left;
  }

  .pull-right{
    float: right;
  }

  .chat-img{
    border-radius: 50%;
    float: left;
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
  .right .chat-img{
    float: left;
  }
  .chat-avatar{
    border-radius: 23px;
    height: 46px;
    width: 46px;
    line-height: 46px;
    text-align: center;
    background-color: rgb(45, 140, 240);
    color: #fff;
    float: left;
  }
  .chat-text{
    border-radius: 5px;
    position: relative;
    padding: 5px 10px;
    background: #ffffff;
    border: 1px solid #ffffff;
    margin: 5px 0 0 50px;
    color: #444;
  }
  .right .chat-text {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: black;
    margin-right: 0;
    margin-left: 47px;
  }
  .chat-text a{
    margin-left: 10px;
    color: red;
    font-size: 14px;
    font-weight: 600;
  }
  .btnreply{
    float: right;
    padding-bottom: 9px;
    margin-top: -6px;
    padding-top: 10px;
    margin-right: -11px;
  }
  .downbtn{
    padding: 0 0 3px 0px;
    border: 0px solid #dcdfe6;
    background: #f5f5f5 ;
  }
  .detail-data-img{
    width: 23px;
    height:23px;
    position: relative;
    top: 6px;
  }
  .btnreply{
    float: right;
    /*padding-bottom: 9px;*/
    margin-top: -4px;
    /*padding-top: 12px;*/
    margin-right: -11px;
    padding: 5px;
  }
</style>
